<template>
    <div>
    <div class="search">
        <input type="text" placeholder="输入搜索内容" v-model="input" @input="seek">
        <button v-if="flag" @click="cancel">取消</button>
    </div>
    <!-- 结果列表 -->
    <div class="select" v-if="flag">
        <div class="item_list" v-for="item in datalist" :key="item.goods_id">{{item.goods_name}}</div>
    </div>
    <!-- 历史纪录 -->

    </div>
</template>

<script>
import request from "../../request"
export default {
    data(){
        return{
            input:"",
            flag:false,
            datalist:[],
            Timeout:""
        }
    },
    methods:{
        seek(){
            if(this.input.length!==0){
                this.flag=true
            }else{
                this.flag=false
            }
                clearTimeout(this.Timeout)
               this.Timeout=setTimeout(async ()=>{
                   console.log(this.input)
                const res =await request("goods/qsearch",{ query:this.input})
                console.log(res.data.message)
                this.datalist=res.data.message
                },1000)

           
            
        },
        // 取消按钮
        cancel(){
            this.input=""
            this.flag=false
        }
    }
}
</script>

<style  scoped>
.search{
    background-color:#ccc;
    padding: 20rpx;
    display: flex;
}
input{
    background-color: #fff;
    border-radius: 20rpx;
    padding: 10rpx;
    flex: 1;
    margin-right: 10rpx;
}
button{
    width: 150rpx;
    font-size: 14px;
}
.select{
    width: 600rpx;
    margin: 0 auto;
    background-color: #ccc;
}
.item_list{
    font-size: 14px;
    margin: 10rpx;
}
</style>
